<template>
	<!-- <view class="video-main u-flex-center u-col-center"
		v-if="systemConfig.index_video_url_list && systemConfig.index_video_url_list.length > 0"> -->
	<view class="video-main u-flex-center u-col-center" v-if="index_video_url_list.length">
		<video class="video" autoplay loop muted show-mute-btn object-fit="fill" :src="index_video_url_list[videoIndex]"
			@ended="ended"></video>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const index_video_url_list = ref(["https://qn.mtj.cdydsy.com/video/1.mp4", "https://qn.mtj.cdydsy.com/video/3.mp4",
		"https://qn.mtj.cdydsy.com/video/%E4%BF%AE%E4%B8%BD%E5%8F%AF%E8%87%BB%E7%99%BD%E4%BF%AE%E6%8A%A4%E6%97%A5%E9%97%B4%E7%B2%BE%E5%8D%8E%E6%B6%B230ml%E7%9B%92.mp4"
	])
	const videoIndex = ref(0)
	// computed: {
	// 	...mapState({
	// 		systemConfig: state => state.init.systemConfig,
	// 	}),
	// },
	const ended = () => {
		if (index_video_url_list.value.length) {
			videoIndex.value = (videoIndex.value + 1) % index_video_url_list.value.length;
		}
	}
</script>

<style lang="scss" scoped>
	.video-main {
		padding-top: 30rpx;

		.video {
			width: 694rpx;
			height: 400rpx;
		}
	}
</style>